/*
 * @Author: xianfuyou
 * @Date: 2022-04-01 11:08:05
 * @LastEditors: your name
 * @LastEditTime: 2022-04-11 13:11:33
 * @Description: file content
 */
import React, { memo, useEffect, useState } from 'react'
import { Modal, Form, Radio, DatePicker, Input, Row, Col } from 'antd'
import { QuestionCircleFilled } from '@ant-design/icons'
import './css/Model.css'
import moment from 'moment'
import Axios from '../../utils/myAxios'
import Qs from 'qs'
import store from '../../redux/store'
import { getOrderListsAction } from '../../redux/action/orderAction/orderAction'



const { TextArea } = Input

function OrderStatusModel(props) {
  // console.log(props)
  // const baseUrl = 'http://139.155.237.161:8080'
  const { isShow, pHandleOk, pHandleCancel, nowStatus, requestJson } = props
  const { orderStatus, accomplishDate, remarks, id } = nowStatus
  const [checkStatus, setCheckStatus] = useState(null)
  const [checkdownOrder, setCheckdownOrder] = useState(null)
  const [modifyremark, setModifyremark] = useState(null)
  const [form] = Form.useForm()
  // console.log('remark', remark)
  // 持续监听页面状态的变化
  useEffect(() => {
    // 设置初始值
    form.setFieldsValue({
      "orderstate": orderStatus,
      "overOrderStart": accomplishDate && moment(accomplishDate),
      "remark": remarks
    })

    setCheckStatus(orderStatus)
    setCheckdownOrder(accomplishDate && moment(accomplishDate))
    setModifyremark(remarks)
  }, [orderStatus, accomplishDate, remarks, form])

  const handleOk = () => {
    // 根据当前状态传递不同的数据
    if (checkStatus === 2) {
      modifyOrderStatus({
        id: id,
        orderStatus: checkStatus,
        accomplishDate: checkdownOrder && moment(checkdownOrder).format('YYYY-MM-DD'),
        handleRemarks: modifyremark
      })
    } else {
      modifyOrderStatus({
        id: id,
        orderStatus: checkStatus,
        handleRemarks: modifyremark
      })
    }
  };

  const handleCancel = () => {
    pHandleCancel(false);
  };

  // 修改订单状态的方法
  const modifyOrderStatus = (json) => {
    console.log(json)
    Axios.post('/order/updateOrderStatusById', Qs.stringify(json),
      { headers: { "Content-Type": "application/x-www-form-urlencoded" } }).then(res => {
        console.log(res)
        store.dispatch(getOrderListsAction(requestJson))
      }).catch(err => {
        console.log(err)
      })
    pHandleOk(false);
  }

  // 选择radio框的回调
  const OrderStatusOnChange = e => {
    // console.log(e.target.value)
    setCheckStatus(e.target.value);
  };

  // 日期的回调
  const dateOnChange = (e, v) => {
    // console.log(e)
    setCheckdownOrder(e.format('YYYY-MM-DD HH:mm:ss'));
  };

  // 文本域的回调
  const remarkOnChange = e => {
    setModifyremark(e.target.value);
    // console.log(e.target.value)
  };


  return (
    <>
      <Modal
        className='xfy_dep_add_modal'
        title="订单处理"
        okText="保存"
        cancelText="取消"
        visible={isShow}
        onOk={handleOk}
        onCancel={handleCancel}
        destroyOnClose={true}
        forceRender={true}
      >
        {/* 在form表单上进行form.Item初始值的绑定 */}
        <Form preserve={false} form={form}>
          <Form.Item label="订单状态" name="orderstate" >
            <Radio.Group onChange={OrderStatusOnChange} value={checkStatus}>
              <Radio value={2}>已完成</Radio>
              <Radio value={1}>处理中</Radio>
              <Radio value={0}>未处理</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item label="完成日期" style={checkStatus === 2 ? { display: "" } : { display: 'none' }}>
            <Row>
              <Col>
                <Form.Item name="overOrderStart">
                  <DatePicker onChange={dateOnChange} size="small" />
                </Form.Item>
              </Col>
              <Col>
                <Form.Item className={"comment"}>
                  <span className={"comment-icon"}><QuestionCircleFilled style={{ fontSize: '16px' }} /><span>计算业务员提成</span></span>
                </Form.Item>
              </Col>
            </Row>
          </Form.Item>
          <Form.Item label="处理备注" name="remark">
            <TextArea onChange={remarkOnChange} rows={4} placeholder="maxLength is 6" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  )
}

export default memo(OrderStatusModel)